﻿<#include "/templates/taglibs.ftl" />
<#include "/templates/function.ftl" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>openIM即时通讯</title>
    <link rel="icon" href="${contextPath}/favicon.ico" type="image/png">
    <link rel="stylesheet" href="${contextPath}/assets/plugins/openim/vendor/bundle.css">
    <link rel="stylesheet" href="${contextPath}/assets/plugins/openim/vendor/enjoyhint/enjoyhint.css">
    <link rel="stylesheet" href="${contextPath}/assets/plugins/openim/dist/css/app.min.css">
    <link rel="stylesheet" href="${contextPath}/assets/plugins/layui/css/layui.css"  media="all">
</head>
<body>
<style>
    .layui-nav-bar {
        display: none;
    }
</style>
<div class="page-loading"></div>
<!-- disconnected modal -->
<div class="modal fade" id="disconnected" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row mb-5">
                    <div class="col-md-6 offset-3">
                        <img src="${contextPath}/assets/plugins/openim/dist/media/svg/undraw_warning_cyit.svg" class="img-fluid" alt="image">
                    </div>
                </div>
                <p class="lead text-center">Application disconnected</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-success btn-lg openim_reconnect">Reconnect</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ disconnected modal -->
<!-- add friends modal -->
<div class="modal fade" id="addFriends" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="user-plus" class="mr-2"></i> 添加好友
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" title="关闭并清空数据">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">发送好友申请.</div>
                <form>
                    <div class="form-group">
                        <label for="emails" class="col-form-label">用户账号</label>
                        <input type="text" class="form-control" id="user_account">
                    </div>
                    <div class="form-group">
                        <label for="message" class="col-form-label">申请备注</label>
                        <textarea maxlength="128" class="form-control" id="apply_friend_message"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary send_apply_friends">发送</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ add friends modal -->
<!-- new group modal -->
<div class="modal fade" id="newGroup" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="users" class="mr-2"></i> 新建群组
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" title="关闭并清空数据">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="group_name" class="col-form-label">群组名称</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="group_name">
                        </div>
                    </div>
                    <p class="mb-2">群成员</p>
                    <div class="form-group">
                        <div class="avatar-group add_group_list">
                            <a href="#" class="add_group_form" data-toggle="modal" title="选择群组成员" data-target="#selectGroupMembers">
                                <figure class="avatar">
                                    <span class="avatar-title bg-primary rounded-circle">
                                        <i data-feather="plus"></i>
                                    </span>
                                </figure>
                            </a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-form-label">群组简介</label>
                        <textarea class="form-control" id="description"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary add_group_submint">创建</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ select group members modal -->
<div class="modal fade" id="selectGroupMembers" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #4d5052;">
                <h5 class="modal-title">
                    <i data-feather="users" class="mr-2"></i> 选择群成员
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div id="test3" class="demo-transfer"></div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary button_select_group_members">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ select group members modal -->
<div class="modal fade" id="selectDetailGroupMembers" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #4d5052;">
                <h5 class="modal-title">
                    <i data-feather="users" class="mr-2"></i> 选择群成员
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div id="test4" class="demo-transfer"></div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary button_select_card_group_members">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- edit profile modal -->
<div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="edit-2" class="mr-2"></i> 编辑个人资料
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="tab-content" style="padding-top: 0px;">
                    <div class="tab-pane show active" id="personal" role="tabpanel">
                        <form>
                            <div class="form-group">
                                <label for="fullname" class="col-form-label">用户昵称</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="fullname">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i data-feather="user"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">头像</label>
                                <div class="d-flex align-items-center">
                                    <div>
                                        <figure class="avatar mr-3 item-rtl">
                                            <img src="${contextPath}/assets/plugins/openim/dist/media/img/default_avatar.png" class="rounded-circle" alt="image">
                                        </figure>
                                    </div>
                                    <div class="custom-file customFile">
                                        <label class="custom-file-label" for="customFile">上传头像</label>
                                    </div>
                                </div>
                                <input id="update_user_image" value hidden="hidden"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary update_user_info">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ edit profile modal -->
<div class="layui-header">
    <ul id="driver-logo-system" style="height: 60px;" class="layui-nav">
        <li class="layui-nav-item layui-hide-xs" lay-unselect>
          <div class="layui-logo">
              <a href="https://demo.opendao.cn" target="_blank" style="padding: 0;">
                  <img class="logo" src="${contextPath}/assets/images/logo.png" style="height: 50px;vertical-align: top;margin-top: 5px;">
                  <span class="logo-name">${SystemName}</span>
              </a>
          </div>
        </li>
    </ul>
    <#if UserDetailSession()??>
       <ul class="layui-nav layui-layout-right">
            <li id="driver-pull-menu" class="layui-nav-item" lay-unselect>
                <a href="javascript:;">
                    <span>${(UserDetailSession().users.uname)!'Guest'}</span><span class="layui-icon layui-icon-down layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child layui-anim layui-anim-upbit">
                  <dd>
                    <a href="${contextPath}/logout">
                        <i class="fa fa-sign-out"></i>登出
                    </a>
                  </dd>
                </dl>
            </li>
       </ul>
    </#if>
</div>
<!-- layout -->
<div class="layout" style="padding-bottom: 50px;">
    <!-- navigation -->
    <nav class="navigation">
        <div class="nav-group">
            <ul class="left_chart_tab">
                <li>
                    <a class="active" data-navigation-target="chats" href="#" data-toggle="tooltip" title="消息" data-placement="right">
                        <!--  <span class="badge badge-warning show_new_chart_notice" style="display: none;"></span> -->
                        <i data-feather="message-circle"></i>
                    </a>
                    <div class="message-count show_new_chart_notice" style="display:none; margin-bottom: 10px;background: red;width: 22px;height: 22px;border-radius: 50%;text-align: center;color: rgb(255, 255, 255);font-size: 11px;font-weight: 500;line-height: 22px;margin-left: auto;position: absolute;margin-top: -45px;margin-left: 35px;">10</div>
                </li>
                <li>
                    <a data-navigation-target="friends" href="#" data-toggle="tooltip" title="我的好友" data-placement="right">
                    <span class="badge badge-warning show_friends_notice" style="display: none;"></span>
                        <i data-feather="user"></i>
                    </a>
                </li>
               <li>
                    <a data-navigation-target="favorites" data-toggle="tooltip" title="我的群组" data-placement="right" href="#">
                        <i data-feather="users"></i>
                    </a>
                </li>
                <li class="brackets">
                    <a data-navigation-target="archived" href="#" data-toggle="tooltip" title="新的好友" data-placement="right">
                        <span class="badge badge-danger show_new_friends_notice" style="display: none;"></span>
                        <i data-feather="user-plus"></i>
                    </a>
                </li>
                <li>
                    <a href="#" class="dark-light-switcher" data-toggle="tooltip" title="夜晚模式" data-placement="right">
                        <i data-feather="moon"></i>
                    </a>
                </li>
                <li data-toggle="tooltip" data-placement="right" style="margin-bottom: 50px;">
                    <a href="#" data-toggle="dropdown">
                        <figure class="avatar">
                            <img src="${contextPath}/assets/plugins/openim/dist/media/img/women_avatar5.jpg" id="user_self_head" class="rounded-circle" alt="image">
                        </figure>
                    </a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item update_user_self_info" data-toggle="modal" data-target="#editProfileModal">编辑资料</a>
                        <a href="#" class="dropdown-item self_chart_info" data-navigation-target="contact-information">个人资料</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- ./ navigation -->
    <!-- content -->
    <div class="content">
        <!-- sidebar group -->
        <div class="sidebar-group">
            <!-- Chats sidebar -->
            <div id="chats" class="sidebar active">
                <header>
                    <span>消息</span>
                </header>
                <form>
                    <input type="text" class="form-control search_chart_list" placeholder="搜索聊天">
                    <i class="clear-search-chart layui-icon layui-icon-close-fill" style="display:none; position: absolute;font-size: 20px;color: darkgray;cursor: pointer;top: 110px;left: 400px;"></i>
                </form>
                <div class="sidebar-body">
                    <ul class="list-group list-group-flush user_chart_list"></ul>
                </div>
            </div>
            <!-- ./ Chats sidebar -->
            <!-- Friends sidebar -->
            <div id="friends" class="sidebar">
                <header>
                    <span>我的好友</span>
                    <ul class="list-inline">
                        <li class="list-inline-item" data-toggle="tooltip" title="添加好友">
                            <a class="btn btn-outline-light" href="#" data-toggle="modal" data-target="#addFriends">
                                <i data-feather="user-plus"></i>
                            </a>
                        </li>
                        <li class="list-inline-item d-xl-none d-inline">
                            <a href="#" class="btn btn-outline-light text-danger sidebar-close">
                                <i data-feather="x"></i>
                            </a>
                        </li>
                    </ul>
                </header>
                <form>
                    <input type="text" class="form-control search_friends_list" placeholder="搜索好友">
                    <i class="clear-search-friends layui-icon layui-icon-close-fill" style="display:none; position: absolute;font-size: 20px;color: darkgray;cursor: pointer;top: 110px;left: 400px;"></i>
                </form>
                <div class="sidebar-body">
                    <ul class="list-group list-group-flush friends_chart_list"></ul>
                </div>
            </div>
            <!-- ./ Friends sidebar -->
            <!-- Favorites sidebar -->
            <div id="favorites" class="sidebar">
                <header>
                    <span>我的群组</span>
                    <ul class="list-inline">
                        <li class="list-inline-item" data-toggle="tooltip" title="添加群组">
                            <a class="btn btn-outline-light" href="#" data-toggle="modal" data-target="#newGroup">
                                <i data-feather="users"></i>
                            </a>
                        </li>
                        <li class="list-inline-item d-xl-none d-inline">
                            <a href="#" class="btn btn-outline-light text-danger sidebar-close">
                                <i data-feather="x"></i>
                            </a>
                        </li>
                    </ul>
                </header>
                <form>
                    <input type="text" class="form-control search_group_list" placeholder="搜索群组">
                    <i class="clear-search-group layui-icon layui-icon-close-fill" style="display:none; position: absolute;font-size: 20px;color: darkgray;cursor: pointer;top: 110px;left: 400px;"></i>
                </form>
                <div class="sidebar-body">
                    <ul class="list-group list-group-flush users-list group_chart_list"></ul>
                </div>
            </div>
            <!-- ./ Stars sidebar -->
            <!-- Archived sidebar -->
            <div id="archived" class="sidebar">
                <header>
                    <span>新的好友</span>
                    <ul class="list-inline">
                        <li class="list-inline-item d-xl-none d-inline">
                            <a href="#" class="btn btn-outline-light text-danger sidebar-close">
                                <i data-feather="x"></i>
                            </a>
                        </li>
                    </ul>
                </header>
                <form>
                    <input type="text" class="form-control search_friends_apply_list" placeholder="搜索好友申请">
                    <i class="clear-search-apply-friends layui-icon layui-icon-close-fill" style="display:none; position: absolute;font-size: 20px;color: darkgray;cursor: pointer;top: 110px;left: 400px;"></i>
                </form>
                <div class="sidebar-body">
                    <ul class="list-group list-group-flush users-list new_friends_apply_list"></ul>
                </div>
            </div>
            <!-- ./ Archived sidebar -->
        </div>
        <!-- ./ sidebar group -->
        <!-- chat -->
        <div class="chat">
            <div class="chat-header" style="display: none;">
                <div class="chat-header-user">
                    <figure class="avatar">
                        <img src="${contextPath}/assets/plugins/openim/dist/media/img/man_avatar3.jpg" class="rounded-circle" alt="image">
                    </figure>
                    <div>
                        <h5>Byrom Guittet</h5>
                        <!-- <small class="text-success">
                            <i>writing...</i>
                        </small> -->
                    </div>
                </div>
            </div>
            <div class="chat-body"> <!-- .no-message -->
                <div class="no-message-container" style="height: 80%">
                    <div class="row mb-5" style="height: 100%">
                        <div class="col-md-4 offset-4">
                            <img title="请添加好友进行聊天" style="margin-top: 10%;" src="${contextPath}/assets/plugins/openim/dist/media/svg/undraw_product_tour_foyt.svg" class="img-fluid" alt="image">
                        </div>
                    </div>
                    <!-- <p class="lead" style="margin-left: 40%;">请先添加好友，或选择好友聊天!</p> -->
                </div>
                <div class="messages"></div>
            </div>
            <div class="chat-footer" style="display: none;">
                <form>
                    <div>
                        <button class="btn btn-light mr-3 upload-sel" data-toggle="tooltip" title="图片" type="button">
                            <i data-feather="smile"></i>
                        </button>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入消息">
                    <div class="form-buttons">
                        <!-- <button class="btn btn-light" data-toggle="tooltip" title="文件" type="button">
                            <i data-feather="paperclip"></i>
                        </button> -->
                        <button class="btn btn-light d-sm-none d-block" data-toggle="tooltip" title="Send a voice record" type="button">
                            <i data-feather="mic"></i>
                        </button>
                        <button class="btn btn-primary" type="submit">
                            <i data-feather="send"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- ./ chat -->
        <div class="sidebar-group">
            <div id="contact-information" class="sidebar">
                <header>
                    <span>资料</span>
                    <ul class="list-inline">
                        <li class="list-inline-item">
                            <a href="#" class="btn btn-outline-light text-danger sidebar-close">
                                <i data-feather="x"></i>
                            </a>
                        </li>
                    </ul>
                </header>
                <div class="sidebar-body">
                    <div class="pl-4 pr-4">
                        <div class="text-center user_info_card">
                            <figure class="avatar avatar-xl mb-4">
                                <img src="${contextPath}/assets/plugins/openim/dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">
                            </figure>
                            <h5 class="mb-1">Mirabelle Tow</h5>
                            <div class="user_info_card_id" style="display: none;">账号:<small class="text-muted font-italic">Last seen: Today</small></div>
                            <div class="introduction" style="display: none;"></div>
                            <div class="group_member_add_button" style="display: none;">
                                <a href="#" class="add_group_card_form" data-toggle="modal" title="添加群组成员" data-target="#selectDetailGroupMembers">
                                    <figure class="avatar">
                                        <span class="avatar-title bg-primary rounded-circle">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                                        </span>
                                    </figure>
                                </a>
                            </div>
                            <div class="group_members_list" style="margin-top: 10px;margin-bottom: 10px;display: none;"></div>
                        </div>
                    </div>
                    <div class="pl-4 pr-4" style="border: 0px;text-align: center;padding-top: 20px;">
                        <button type="button" data-navigation-target="chats" class="btn btn-primary select_user_to_chart">发消息</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ./ content -->
</div>
<script src="${contextPath}/assets/plugins/layui/layui.js"></script>
<!-- ./ layout -->
<script src="${contextPath}/assets/plugins/openim/dist/js/open-im-sdk"></script>
<!-- Bundle -->
<script src="${contextPath}/assets/plugins/openim/vendor/bundle.js"></script>
<script src="${contextPath}/assets/plugins/openim/vendor/enjoyhint/enjoyhint.min.js"></script>
<!-- App scripts -->
<script src="${contextPath}/assets/plugins/openim/dist/js/app.min.js"></script>
<!-- Examples -->
<script src="${contextPath}/assets/plugins/openim/dist/js/examples.js"></script>
</body>
</html>
